<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31.使用Vue开发简单页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

</head>
<body>
<div id="app">
    <div class="container">
        <div class="row" style="margin-top: 70px">
            <div class="col-md-10 col-md-offset-1">
                <ul class="nav nav-pills nav-justified">
                    <li role="presentation" :class="showActive=='home'?'active':''"><a href="#/home" @click="changeActive('home')">欢迎页面</a></li>
                    <li role="presentation" :class="showActive=='user'?'active':''"><a href="#/user" @click="changeActive('user')">用户管理</a></li>
                    <li role="presentation" :class="showActive=='student'?'active':''"><a href="#/student" @click="changeActive('student')">学生管理</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>
<template id="home">
    <div>
        <div class="jumbotron" style="margin-top: 100px">
            <div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
                    featured content or information.</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
            </divclass>
        </div>
    </div>
</template>
<template id="user">
    <div>
        <table class="table table-striped" style="margin-top: 100px">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            <tr v-for="u in users">
                <td>{{u.id}}</td>
                <td>{{u.username}}</td>
                <td>{{u.age}}</td>
                <td>{{u.salary}}</td>
                <td><a href="" class="btn btn-default">修改</a><a href="" class="btn btn-danger">删除</a></td>
            </tr>
        </table>
    </div>
</template>
<template id="student">
    <div>
        <table class="table table-striped" style="margin-top: 100px">
            <tr>
                <th>id</th>
                <th>学生姓名</th>
                <th>年龄</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>1999-01-01</td>
                <td><a href="" class="btn btn-default">修改</a><a href="" class="btn btn-danger">删除</a></td>
            </tr>
        </table>
    </div>
</template>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const home = {
        template: "#home"
    }
    const user = {
        template: "#user",
        data() {
            return {
                users: [],
            }
        },
        methods: {},
        created() {
            _this = this;
            axios.get("http://localhost:8080/user/findAll").then((res) => {
                console.log(res.data);
                _this.users = res.data;
            });
        }
    }
    const student = {
        template: "#student"
    }
    var router = new VueRouter({
        routes: [
            {path: '/', redirect: "/home"},
            {path: '/home', component: home},
            {path: '/user', component: user},
            {path: '/student', component: student}
        ]
    });
    const app = new Vue({
        el: '#app',
        data: {
            showActive: 'home'
        },
        methods: {
            changeActive(active) {
                this.showActive = active;
            }
        },
        router
    });
</script>
</body>
</html>